<template>
  <div class="h-full flex relative">
    <!-- 左侧文档区域 - 这里是滚动容器 -->
    <div class="flex-1 overflow-y-auto" ref="scrollContainer" id="document-scroll-area">
      <div class="relative" ref="documentContainer">
        <div id="page-prereview"
          class="mx-auto max-w-[500px] w-full min-w-[500px] aspect-[210/297] bg-gray-50 shadow-lg rounded-md p-8 md:p-12">
          <n-space vertical :size="24" class="h-full">
            <h2 class="text-xl font-bold text-center">关于对发展对象预审结果的通知</h2>

            <div class="leading-relaxed">
              软件学院本科生第一党支部：
            </div>

            <div class="leading-relaxed indent-8">
              学院党委对你支部上报的发展对象 {{ member.memberName }}
              的条件、培养教育情况等进行了审查。该同志基本符合发展党员条件，培养教育情况符合要求，入党材料齐全，相关手续和程序规范，审查合格，可以发展。
            </div>

            <div class="leading-relaxed indent-8">
              特此通知
            </div>

            <div class="flex-grow"></div>

            <n-space vertical align="end" :size="4">
              <div>中共东北大学软件学院委员会</div>
              <div id="section-signature">{{ formattedSignatureDate }}</div>
            </n-space>
          </n-space>
        </div>
      </div>
    </div>

    <!-- 右侧固定导航区域 - 相对于当前组件定位 -->
    <div class="absolute top-4 right-4 w-64 z-10">
      <div class=" p-4 rounded-lg shadow-md">
        <n-anchor :bound="100" :listen-to="scrollContainer" :offset-target="scrollContainer">
          <n-anchor-link title="落款" href="#section-signature" />
        </n-anchor>
      </div>
    </div>
  </div>
</template>




<script setup>
import { computed } from 'vue'
import { NSpace } from 'naive-ui'

// 接收 member 属性，其中应包含 memberName 和 developmentTargetPrereview 对象
const props = defineProps({
  member: {
    type: Object,
    default: () => ({
      memberName: '***', // 提供默认值以防数据缺失
      developmentTargetPrereview: {}
    })
  },
})

// 计算属性，用于格式化落款日期
const formattedSignatureDate = computed(() => {
  const date = props.member?.developmentTargetPrereview?.signatureDate
  if (!date) return '____年__月__日' // 如果日期不存在，显示占位符

  // 将 YYYY-MM-DD 格式转换为 YYYY年MM月DD日 格式
  const [year, month, day] = date.split('-')
  return `${year}年${month}月${day}日`
})
</script>

<style scoped>
/* 使用 text-indent 实现首行缩进 */
.indent-8 {
  text-indent: 2em;
  /* 2em 通常代表缩进两个字符 */
}
</style>